<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>搜索过滤器</title>
		<style>

		</style>
	</head>
	<body>
		<input id="input1" />
		<ul>
			<li data-search="少司命shaosiming">少司命</li>
			<li data-search="东皇太一donghuangtaiyi">东皇太一</li>
			<li data-search="山鬼shangui">山鬼</li>
			<li data-search="屈原quyuan">屈原</li>
		</ul>
		<script>
			var eleStyle = document.createElement('style');
			document.head.appendChild(eleStyle);
			var input = document.getElementById("input1")
			input.addEventListener("input", function() {
				var value = this.value.trim();
				eleStyle.innerHTML = value ? '[data-search]:not([data-search*="' + value + '"]) {display: none;}' : "";
			})
		</script>
	</body>
</html>
